import React from 'react';
import ReactDOM from 'react-dom';
import './06props.css'


//实现子传父
class PartentCom extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      childData : null
    }
  }
  render(){
    return(
      <div>
        <h1>子元素传递给父元素的数据:{this.state.childData} </h1>
        <ChildCom setChildData={this.setChildData}/>
      </div>
    )

  }
  setChildData =(data) =>{
    this.setState({
      childData:data
    })
  }


}

class ChildCom extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      msg: 'helloword'
    }
  }
  render(){
    return(
      <div>
        <button onClick={this.sendData}>传递helloword给父元素</button>
        <button onClick={()=>{this.props.setChildData('直接调用props函数')}}>传递helloword给父元素</button>
      </div>
    )
  }
  //箭头函数不用进行绑定
  sendData = () =>{
    // console.log(this.state.msg);
    //将子元素传递给父元素。实际就是调用父元素传递进来的父元素函数
    this.props.setChildData (this.state.msg)
  }
}




  ReactDOM.render(
    <PartentCom /> ,
    document.querySelector('#root')
  )

    // console.log(new Date()); 不会初始化






// 
// 


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

